import { Modal, Button, Row, Col } from 'antd';
import { FC, useMemo } from 'react';

import { ViewDialogProps } from './interface';
// import { Description, DescriptionList } from '../../slice-file-upload/modal/description-list';

import { LeftOutlined, RightOutlined } from '@ant-design/icons';

// import { isFunction } from 'lodash';
// import { getPathValue } from '../../_common/valueUtil';

// import './index.less';
import useIndexes from '@/biz-components/hooks/useIndexes';
import { Empty } from "antd";
import ImgView from '@/biz-components/img-view';
import PdfView from "@/biz-components/pdf-view";

const IMG_TYPE = [
  ".jpg",
  ".JPG",
  ".jpeg",
  ".JPEG",
  ".png",
  ".PNG",
  ".bmp",
  ".BMP",
  ".SVG",
  ".svg",
];
const PDF_TYPE = [".pdf", "pdf"];

interface ViewContainerProps {
  type: string;
  height?: number | string;
  fileUrl: string;
}

const ViewContainer: FC<ViewContainerProps> = ({ type, height, fileUrl }) => {
  if (IMG_TYPE.includes(type)) {
    return <ImgView images={fileUrl} height={height} width="100%" />;
  }

  if (PDF_TYPE.includes(type)) {
    return <PdfView fileUrl={fileUrl} height={height} />;
  }

  return <Empty description="暂未支持预览" />;
};

ViewContainer.defaultProps = {
  height: 500,
};

const ImgDialog = ({
  visible,
  onCancel,
  title = "详情",
  dataSource,
  descriptionListProps,
}) => {
  // const { length } = dataSource;
  // const lastIndex = useMemo(() => {
  //   return length - 1;
  // }, [length]);
  //
  // const [current, prev, next] = useIndexes(index, lastIndex);
  //
  // const record = useMemo(() => {
  //   return dataSource[current];
  // }, [current, dataSource]);
  //
  // const { imgSrc } = record;


  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      width={1300}

      closable
      maskClosable
      bodyStyle={{
        overflowY: 'auto',
      }}
      footer={null}
    >
      <Row>
        <Col span={24}>
          <ViewContainer
              type={dataSource.type}
              height={500}
              fileUrl={dataSource.imgSrc}
          />
        </Col>
        {/*<Col span={8}>*/}
          {/*<DescriptionList {...descriptionListProps}>*/}
          {/*  {columns?.map((item, index) => {*/}
          {/*    const { render, dataIndex, title, descriptionProps } = item;*/}
          {/*    const text = getPathValue<any, any>(record, dataIndex);*/}
          {/*    return (*/}
          {/*      <Description label={title} {...descriptionProps}>*/}
          {/*        {isFunction(render) ? render(text, item, index) : text}*/}
          {/*      </Description>*/}
          {/*    );*/}
          {/*  })}*/}
          {/*</DescriptionList>*/}
        {/*</Col>*/}
      </Row>
    </Modal>
  );
};

export default ImgDialog;
